;(function(w){
  var component = {
    name:'unit-details',
    template:'<section>'
      + '<div class="pop" v-if="isShowBuUnitDetail">'
      + '<div class="head-pop font-16"><span class="title">单元详情</span>'
      + '<button class="fw-close absolute" @click="closeBuUnitDetail">×</button>'
      + '</div>'
      + '<div class="rt-unit-content-pop-container" :style="radiusStyle">'
      + '<ul class="plr-24 border-b clearfix cursor">'
      +    '<li v-for="item in buUnitPopTab" @click="getBuUnitMes(item)" :class="{active:selectedbuUnitTabItem == item}">{{item}}</li>'
      + '</ul>'
      + '<div class="content plr-24" style="height:440px;" :style="radiusStyle">'
      +    '<section v-if="houseInfoFlag">'
      +    '<div class="pb-10 border-b">'
      +       '<div class="title" :style="titleStyle">基础信息</div>'
      +       '<div class="line-height-34"><b>项目：</b><span>{{unitDetails.projectName | undefined}}</span></div>'
      +       '<div class="dy-flex line-height-34">'
      +       '<div class="dy-fx-1">'
      +           '<b>楼栋：</b>'
      +           '<span>{{unitDetails.buildingName | undefined}}</span>'
      +       '</div>'
      +       '<div class="dy-fx-1">'
      +           '<b>楼层：</b>'
      +           '<span>{{unitDetails.floorName | undefined}}</span>'
      +       '</div>'
      +       '<div class="dy-fx-1">'
      +           '<b>单元名称：</b>'
      +           '<span>{{unitDetails.unitName | undefined}}</span>'
      +       '</div>'
      +       '</div>'
      +       '<div class="dy-flex line-height-34">'
      +        '<div class="dy-fx-1">'
      +           '<b>业态：</b>'
      +           '<span>{{unitDetails.bType | formatBusinessType}}</span>'
      +         '</div>'
      +         '<div class="dy-fx-1">'
      +           '<b>单元底价：</b>'
      +           '<span>{{unitDetails.basePrice | formatNum}}{{unitDetails.basePriceType ? (unitDetails.basePriceType == "M" ? "元/平米/月" : "元/平米/天") : "元/平米/天"}}</span>'
      +         '</div>'
      +         '<div class="dy-fx-1">'
      +           '<b>显示价格：</b>'
      +           '<span>{{unitDetails.sellPrice | formatNum}}元/平米/天</span>'
      +         '</div>'
      +       '</div>'
      +       '<div class="dy-flex line-height-34">'
      +         '<div class="dy-fx-1">'
      +           '<b>单元面积：</b>'
      +           '<span>{{unitDetails.unitAcreage | formatNum}}m²</span>'
      +         '</div>'
      +         '<div class="dy-fx-1">'
      +           '<b>建筑面积：</b>'
      +           '<span>{{unitDetails.consAcreage | formatNum}}m²</span>'
      +         '</div>'
      +         '<div class="dy-fx-1">'
      +           '<b>套内面积：</b>'
      +           '<span>{{unitDetails.innerAcreage | formatNum}}m²</span>'
      +         '</div>'
      +       '</div>'
      +       '<div class="dy-flex line-height-34">'
      +         '<div class="dy-fx-1">'
      +           '<b>装修水平：</b>'
      +           '<span>{{typeval | undefined}}</span>'
      +         '</div>'
      +         '<div class="dy-fx-1">'
      +           '<b>朝向：</b>'
      +           '<span>{{unitDetails.orientationType | unitOrientation | undefined}}</span>'
      +         '</div>'
      +         '<div class="dy-fx-1">'
      +           '<b>临街：</b>'
      +           '<span v-if="unitDetails.streetType === Y">是</span>'
      +           '<span v-if="unitDetails.streetType === N">否</span>'
      +           '<span v-if="unitDetails.streetType === UN">--</span>'
      +         '</div>'
      +       '</div>'
      +     '</div>'
      +     '<div class="pb-10 facility-container">'
      +       '<div class="title" :style="titleStyle">标准设施</div>'
      +       '<ul class="clearfix">'
      +         '<li v-if="item.selected" v-for="(item,index) in baseFacility" :code="item.code" :class="{active:item.selected}">{{item.name}}</li>'
      +       '</ul>'
      +     '</div>'
      +   '</section>'
      +   '<section v-if="imageFontFlag">'
      +     '<div class="image-font">'
      +       '<div class="title" :style="titleStyle">图片信息</div>'
      +       '<div>'
      +         '<div class="dy-flex" v-if="unitPositionImgArr.length">'
      +           '<div class="dy-fx-1 dy-flex image-title">楼层平面落位：</div>'
      +           '<div class="dy-fx-5">'
      +              '<img :src="item" alt="楼层平面落位图" v-for="item in unitPositionImgArr" @click="showBigImage(item)">'
      +           '</div>'
      +         '</div>'
      +         '<div class="dy-flex" v-if="unitPlainImgArr.length">'
      +           '<div class="dy-fx-1 dy-flex image-title">单元平面图：</div>'
      +           '<div class="dy-fx-5">'
      +              '<img :src="item" alt="单元平面图" v-for="item in unitPlainImgArr" @click="showBigImage(item)">'
      +           '</div>'
      +         '</div>'
      +         '<div class="dy-flex" v-if="consImgsArr.length">'
      +           '<div class="dy-fx-1 dy-flex image-title">装修图：</div>'
      +           '<div class="dy-fx-5">'
      +              '<img :src="item" alt="装修图" v-for="item in consImgsArr" @click="showBigImage(item)">'
      +           '</div>'
      +         '</div>'
      +         '<div class="dy-flex" v-if="innerImgsArr.length">'
      +           '<div class="dy-fx-1 dy-flex image-title">室内实拍图：</div>'
      +           '<div class="dy-fx-5">'
      +              '<img :src="item" alt="室内实拍图" v-for="item in innerImgsArr" @click="showBigImage(item)">'
      +           '</div>'
      +         '</div>'
      +        '</div>'
      +     '</div>'
      +     '<div>'
      +       '<div class="title" :style="titleStyle">单元简介</div>'
      +       '<div class="unit-intro">'
      +          '<div class="ptb-10 plr-12" style="white-space: pre-wrap; word-break: break-all;">{{unitDetails.memo}}</div>'
      +       '</div>'
      +     '</div>'
      +   '</section>'
      +   '<section v-if="xgwjFlag">'
      +   '<ul>'
      +   '<li class="clearfix border-b lin-hei-34" style="width:100%;margin:0; text-align:left; " v-for="item in contractFile">'
      +   '  <p class="icon-Nav-contract-file file-name pull-left" @click="previewImage(item.url)" style="line-height:50px;width:80%;"><span class="ml-10">{{item.name}}</span></p>'
      +   '  <p class="pull-right file-btn"><a :href="item.url" class="icon-Gm-download download-file-btn ml-10 color-primary" style="line-height: 48px;"><b class="pl-5 font-12">下载</b></a> </p>'
      +   '</li>'
      +   '  </ul>'
      +   '</section>'
      + '</div>'
      + '</div>'
      + '</div>'
      + '<div class="backdrop" v-if="isShowBuUnitDetail"></div>'
      + '</section>',
    props:{
      unitId:{
        default:null
      },
      unitDetailsFlag:{
        default:false
      }
    },
    data(){
      return {
        unitDetails: [],
        contractFile: [],
        buUnitPopTab: [
          '房源详情',
          '图文描述',
          '相关文件'
        ],
				decoration: [],
        selectedbuUnitTabItem: '房源详情',
        selectedUnitId:this.unitId,
        isShowBuUnitDetail: this.unitDetailsFlag,    // 普通单元详情
        houseInfoFlag: true, // 房源信息
        imageFontFlag: false, // 图文描述
        xgwjFlag: false,
        createContractFlag:true,  // 创建合同按钮权限
        checkContractFlag:true,   // 查看合同详情权限
        baseFacility: [], // 基础设施
        unitPositionImgArr: [], // 单元楼层落位图
        unitPlainImgArr: [], // 单元平面图
        consImgsArr: [], // 装修图纸
        innerImgsArr: [], // 室内自拍图
        Y:'Y',
        N:'N',
        UN:undefined,
        radiusStyle:{
          'border-bottom-left-radius':'6px',
          'border-bottom-right-radius':'6px'
        },
        titleStyle:{
          'color':'#a5aab7',
          'line-height':'20px',
          'height':'40px',
          'padding':'10px 0'
        }
      }
    },
    filters: {
      undefined: function(item) {
        if (!item) return '--'
        return item
      },
      formatNum: function(item) {
        if(item === undefined) return '--'
        return hlNumberUtil.formatNum(item)
      },
      formatBusinessType: function(item) {
        return hlCodeConvert.businessType(item)
      },
      formatDate: function(time) {
        if (time === undefined) return '--'
        return hlDateUtil.formatUTCDate(time,'yyyy-MM-dd')
      },
      contractAuditState: function(state) {
        return hlCodeConvert.contractAuditState(state)
      },
      unitDecoration:function(item){
        return hlCodeConvert.decoration(item)
      },
      unitOrientation:function(item){
        return hlCodeConvert.orientation(item)
      }
    },
    watch:{
      unitId:function(val){
        this.selectedUnitId = val
        if(val){ this.getBuUnitDetails(this.selectedUnitId) }
      },
      unitDetailsFlag:function(val){
        this.isShowBuUnitDetail = val
      }
    },
		computed: {
			typeval () {
				let val;
				this.decoration.map(item => {
					if (this.unitDetails.decorationType == item.code) {
						val = item.memo
					}
				})
				return val
			}
		},
    methods:{
			//获取装修水平类型列表
			getDecorationtypes: function () {
			  var self = this;
			  hlhttp.get({
			    url: 'unit/decoration_types',
			    success: function (res) {
			      self.decoration = res;
			    }
			  })
			},
      // tab切换
      getBuUnitMes: function(item) {
        var self = this;
        if (item === '房源详情') {
          self.houseInfoFlag = true;
          self.imageFontFlag = false;
          self.contractFlag = false;
          self.xgwjFlag = false;
          self.selectedbuUnitTabItem = '房源详情'
          self.getBuUnitDetails(self.selectedUnitId)
        }
        if (item === '图文描述') {
          self.houseInfoFlag = false;
          self.imageFontFlag = true;
          self.contractFlag = false;
          self.xgwjFlag = false;
          self.selectedbuUnitTabItem = '图文描述'
        }
        if (item === '相关文件') {
          self.houseInfoFlag = false;
          self.imageFontFlag = false;
          self.contractFlag = false;
          self.xgwjFlag = true;
          self.selectedbuUnitTabItem = '相关文件'
        }
      },
      // 获取普通单元详情信息
      getBuUnitDetails: function(id) {
        var self = this;
        hlhttp.get({
          url: 'unit/info',
          data: {'unit_id': id},
          success: function(data) {
            self.unitDetails = data;

            self.contractFile = []
            if (data.attachmentNames) {
              var attname = data.attachmentNames.split(',')
              var atturl = data.attachmentUrls.split(',')
              for (var i = 0; i < attname.length; i++) {
                self.contractFile.push({name:attname[i],url:atturl[i]})
              }
            }

            var baseFacilityArr = [];
            self.baseFacility.map(function(_item){
              var obj = {'code':_item.code,'name':_item.name,'selected':false}
              baseFacilityArr.push(obj)
            })
            self.baseFacility = baseFacilityArr;
            // 基础设施
            data.facilitys.map(function(item){
              var facIndex = 0;
              self.baseFacility.map(function(_item){
                if(item === _item.code){ _item['selected'] = true }
                facIndex++;
              })
            })
            // 图片转换
            self.unitPositionImgArr = data.unitPositionImg ? data.unitPositionImg.split() : []
            self.unitPlainImgArr = data.unitPlainImg ? data.unitPlainImg.split() : []
            self.consImgsArr = data.consImgs
            self.innerImgsArr = data.innerImgs
          }
        })
      },
      // 获取基础设施类型列表
      getfacilityTypesData: function() {
        var self = this;
        hlhttp.get({
          url: 'unit/facility_types_free',
          success: function(data) {
            var baseFacilityArr = [];
            data.map(function(_item){
              var obj = {'code':_item.code,'name':_item.name,'selected':false}
              baseFacilityArr.push(obj)
            })
            self.baseFacility = baseFacilityArr;
          }
        })
      },
      // 大图展示
      showBigImage:function(src){
        $.imageShow(src.split())
      },
      previewImage:function(url){
        var imageExt = ['jpg', 'jpeg', 'png', 'JPG', 'JPEG', 'PNG'];
        var pdfExt = ['pdf', 'PDF'];
        var officeExt = ['docx','doc','xlsx','xls','xlt']
        var imageFlag = false;
        var pdfFlag = false;
        var officeFlag = false;

        imageExt.forEach((e, i) => {
          if (url.indexOf(e) !== -1) imageFlag = true;
        })

        if (imageFlag) {
          $.imageShow([url])
          return
        }
        pdfExt.forEach((e, i) => {
          if (url.indexOf(e) !== -1) pdfFlag = true;
        })
        if (pdfFlag) {
          $.previewPDF(url)
          return
        }

        officeExt.forEach((e, i) => {
          if (url.indexOf(e) !== -1) officeFlag = true
        })
        if (officeFlag) {
          $.previewOffice(url)
          return
        }

        hl.toast('暂不支持该格式')
      },
      closeBuUnitDetail: function() {
        this.isShowBuUnitDetail = false;
        this.$emit('close',this.isShowBuUnitDetail)
      }
    },
    mounted:function(){
      this.getfacilityTypesData()
			this.getDecorationtypes()
    }
  }

  Vue.component('unit-details', component);

}(window))
